<template>
    <div class="warp-2" style="height: 100%;">
        <navbar :title="$t('fill_out_the_leave_application')"></navbar>
        <div class="content content-warp" :style="{'padding-bottom': isAdd ? '56px' : '0'}">
            <div class="info-warp" v-if="isAdd">
                <h2>{{ $t('leave_application_form') }}</h2>
                <van-form label-width="6.3em" submit-on-enter error-message-align="right" ref="formData" colon @submit="onSubmit">
                    <van-field name="usrDisplayBil" readonly  :label="$t('leave_person')" :value="leaveForm.usrDisplayBil"/>
                    <van-field name="usrUnName" readonly :label="$t('work_unit')" :value="leaveForm.usgFullPath"/>
                    <van-field
                        name="alTypeName"
                        readonly
                        clickable
                        :value="leaveForm.alTypeName"
                        input-align="right"
                        :label="$t('leave_type')"
                        :placeholder="$t('please_select_leave_type')"
                        right-icon="arrow"
                        :error="false"
                        @click="showTypePicker = true"
                        :rules="[{ required: true, message: $t('please_select_leave_type') }]"
                    />
                    <van-field
                        name="alReason"
                        v-model="leaveForm.alReason"
                        input-align="right"
                        :label="$t('reason_taking_leave')"
                        right-icon="arrow"
                        rows="1"
                        type="textarea"
                        :maxlength="200"
                        :autosize="{ maxHeight: 100}"
                        :placeholder="$t('enter_reason_leave_request')"
                        :error="false"
                        :rules="[{ required: true, message: $t('enter_reason_leave_request') }]"
                    />
                    <van-field
                        readonly
                        clickable
                        name="alStartTime"
                        :value="leaveForm.alStartTime"
                        input-align="right"
                        :label="$t('Leave_start_time')"
                        right-icon="arrow"
                        @click="openDatePicker('alStartTime', leaveForm.alStartTime)"
                        :rules="[
                        { required: true, message: $t('Please_select_start_time') },
                        { validator: checkStartDate, message: $t('starttime_not_than_endtime'), trigger: 'onChange' }
                        ]"
                    />
                    <van-field
                        readonly
                        clickable
                        name="alEndTime"
                        :value="leaveForm.alEndTime"
                        input-align="right"
                        :label="$t('Leav_end_time')"
                        right-icon="arrow"
                        @click="openDatePicker('alEndTime', leaveForm.alEndTime)"
                        :rules="[
                        { required: true, message: $t('Please_select_the_end_time') },
                        { validator: checkEndDate, message: $t('endtime_not_less_starttime'), trigger: 'onChange' }]"
                    />
                </van-form>
            </div>
            <!-- 请假申请成功 -->
            <div class="success" v-else>
                <div class="success-box">
                    <van-image class="img" :src="require('./images/u22.png')"></van-image>
                    <p class="tip">{{ $t('wait_for_application') }}...</p>
                    <van-button round type="default" size="small" class="back-btn" @click="$router.go(-1)">{{ $t('button_back') }}</van-button>
                </div>
            </div>
        </div>
        <div class="bottom-btns" v-if="isAdd">
            <div class="btn" @click="submitForm">{{ $t('submit_application') }}</div>
        </div>
        <!-- 请假类型选择器 -->
        <van-popup v-model="showTypePicker" position="bottom">
            <van-picker
                :confirm-button-text="$t('mall_10')"
                :cancel-button-text="$t('cancel')"
                :title="$t('leave_type')"
                show-toolbar
                :columns="typeColumns"
                @confirm="val => onConfirm(val, 'showTypePicker')"
                @cancel="showTypePicker = false"
            />
        </van-popup>
        <!-- 时间选择器 -->
        <van-popup v-model="showDatePicker" position="bottom" :key="currentPicker">
            <van-datetime-picker
                :confirm-button-text="$t('mall_10')"
                :cancel-button-text="$t('cancel')"
                v-model="currentDate"
                type="datetime"
                :title="currentPicker === 'alEndTime' ? $t('end_time'):$t('start_time')"
                @confirm="val => onConfirm(val, 'showDatePicker', currentPicker)"
                @cancel="showDatePicker = false"
            />
        </van-popup>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import {Toast} from 'vant';
import CommonLoading from '@/components/common/loading';
export default {
    components: {
        vanToast: Toast,
        CommonLoading
    },
    data() {
        return {
            isLoading: true,
            itmId: this.$route.params.itmId,
            isAdd: true,
            leaveForm: {
                usrDisplayBil: '', // 姓名
                usrUnName: '', // 工作单位
                alItmId: this.$route.params.itmId, // 课程id
                alReason: '', // 原因
                alType: null, // 请假类型0:事假1:病假2:公假
                alTypeName: '', // 请假类型名称
                alStartTime: '', // 开始时间
                alEndTime: '' // 结束时间
            },
            showTypePicker: false,
            showDatePicker: false,
            currentDate: new Date(),
            currentPicker: null,
            typeColumns: [
                {id: 0, text: this.$t('leave_absence')},
                {id: 1, text: this.$t('sick_leave')},
                {id: 2, text: this.$t('public_leave')}
            ]
        };
    },
    methods: {
        /**
         * 获取用户信息 */
        getUserInfo() {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/my/detail`
            }).then((res) => {
                this.leaveForm.usrDisplayBil = res.data.usrDisplayBil;
                this.leaveForm.usgFullPath = res.data.usgDisplayBil;
                this.isLoading = false;
            });
        },
        onSubmit() {
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/leave/reply`,
                data: this.leaveForm
            }).then((res) => {
                this.isAdd = false;
            }).catch((err) => {
                let msg = err.response.data.errMsg;
                Toast(msg);
            });
        },
        submitForm() {
            this.$refs.formData.submit();
        },
        /**
         * 打开时间选择器 */
        openDatePicker(type, val) {
            this.showDatePicker = true;
            this.currentPicker = type;
            this.currentDate = val ? new Date(val) : new Date();
        },
        checkStartDate(val) {
            return this.leaveForm.alEndTime ? this.$moment(val).isBefore(this.leaveForm.alEndTime) : true;
        },
        checkEndDate(val) {
            return this.leaveForm.alStartTime ? this.$moment(val).isAfter(this.leaveForm.alStartTime) : true;
        },
        onConfirm(val, type, currentPicker) {
            if (type === 'showTypePicker') {
                this.leaveForm.alType = val.id;
                this.leaveForm.alTypeName = val.text;
            } else {
                this.leaveForm[currentPicker] = this.$moment(val).format('yyyy-MM-DD HH:mm');
            }
            this[type] = false;
        }
    },
    filters: {
    },
    mounted() {
        this.getUserInfo();
    }
};
</script>

<style scoped lang="less">
    .content-warp{
        padding: 56px 15px 0;
        overflow-y: scroll;
    }
    .info-warp{
        background: #fff;
        border-radius: 5px;
        margin: 15px 0;
        h2{
            text-align: center;
            border-bottom: 1px solid #eee;
            padding: 10px 0;
        }
    }
    .bottom-btns{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 56px;
        width: 100%;
        background: #fff;
        border-top: 1px solid #eee;
        padding: 0 40px;
        box-sizing: border-box;
        text-align: center;
        display: flex;
        align-items: center;
    }
    .btn{
        display: inline-block;
        // width: 90%;
        flex: 1;
        text-align: center;
        color:#fff;
        background: #075ebb;
        border-radius: 4px;
        height: 40px;
        line-height: 40px;
    }
    .success{
        height: calc(100% - 30px);
        background: #fff;
        box-sizing: border-box;
        padding-top: 20vh;
        margin: 15px 0;
        .success-box{
            width: 52%;
            margin: 0 auto;
            text-align: center;
            .img{
                width: 65px;
                height: 65px;
            }
            .tip{
                color: #15bc84;
                margin: 40px 0;
            }
            .back-btn{
                color:#aaa;
                border: 1px solid #aaa;
                padding: 6px 25px;
            }
        }
    }
</style>
